<template>
	<div class="gn_companymesg">
		<div class="company_details">
			<div class="mesg_tit">
				上门服务工单
				<span class="orderstate_tips ostate1">非常紧急</span>
			</div>
			<div class="order_left ">
				<div class="order_mesg clearfix" >
					<div class="line_list clearfix line100 order_stateline" >
						<span class="line_listtit fl">状态：</span>
						<div class="line_listinput" >
							{{workOrderStateName}}
						</div>
					</div>

					<div class="line_list clearfix" >
						<span class="line_listtit fl">创建人：</span>
						<div class="line_listinput" >
							{{workOrderStateName}}
						</div>
					</div>

					<div class="line_list clearfix" >
						<span class="line_listtit fl">创建时间：</span>
						<div class="line_listinput" >
							{{workOrderStateName}}
						</div>
					</div>

					<div class="line_list clearfix" >
						<span class="line_listtit fl">处理人：</span>
						<div class="line_listinput" >
							{{workOrderStateName}}
						</div>
					</div>

					<div class="line_list clearfix" >
						<span class="line_listtit fl">处理时间：</span>
						<div class="line_listinput" >
							{{workOrderStateName}}
						</div>
					</div>

					<div class="line_headtips"><span>客户</span></div>
					<div class="line_list clearfix" >
						<span class="line_listtit fl">客户姓名：</span>
						<div class="line_listinput" >
							{{workOrderStateName}}
						</div>
					</div>

					<div class="line_list clearfix" >
						<span class="line_listtit fl">客户电话：</span>
						<div class="line_listinput" >
							{{workOrderStateName}}
						</div>
					</div>

					<div class="line_headtips"><span>联系人</span></div>
					<div class="line_list clearfix" >
						<span class="line_listtit fl">联系人姓名：</span>
						<div class="line_listinput" >
							{{workOrderStateName}}
						</div>
					</div>

					<div class="line_list clearfix" >
						<span class="line_listtit fl">联系人电话：</span>
						<div class="line_listinput" >
							{{workOrderStateName}}
						</div>
					</div>

					<div class="line_headtips"><span>房屋信息</span></div>
					<div class="line_list clearfix line100" >
						<span class="line_listtit fl">房屋地址：</span>
						<div class="line_listinput" >
							{{workOrderStateName}}
							<a>房屋信息详情</a>
						</div>
					</div>

					<div class="line_list clearfix line100" >
						<span class="line_listtit fl">设备信息：</span>
						<div class="line_listinput" >
							{{workOrderStateName}}
							<a>设备信息详情</a>
						</div>
					</div>

					<div class="line_headtips"><span>任务信息</span></div>
					<div class="line_list clearfix" >
						<span class="line_listtit fl">紧急程度：</span>
						<div class="line_listinput" >
							{{workOrderStateName}}
						</div>
					</div>

					<div class="line_list clearfix" >
						<span class="line_listtit fl">任务类型：</span>
						<div class="line_listinput" >
							{{workOrderStateName}}
						</div>
					</div>
					<div class="line_list clearfix line100" >
						<span class="line_listtit fl">任务描述：</span>
						<div class="line_listinput" >
							{{workOrderStateName}}
						</div>
					</div>

					<div class="line_headtips"><span>指派</span></div>
					<div class="line_list clearfix line_listeditbox" >
						<span class="line_listtit fl"><i class="clred">*</i>处理人：</span>
						<div class="overh" >
							<el-select v-model="handelUserId" placeholder="请选择">
							    <el-option
							      v-for="item in handelUserIdlist"
							      :key="item.handelUserId"
							      :label="item.label"
							      :value="item.handelUserId">
							    </el-option>
							</el-select>
							<p class="line_edittips">*该工单只会指派给 #厂家名称# 厂家人员</p>
						</div>
					</div>
				</div>
				<div class="order_btnbox">
					<el-button type="success">指派处理人</el-button>
	  				<el-button type="info">关闭工单</el-button>
				</div>
			</div>
			<!-- gm流程右边gm -->
			<div class="order_right">
				<p class="order_recordtit">工单跟进记录</p>
				<div class="orderrecordlist" v-for="(item,index) in recordlist" :key="index">
					<p class="order_timetit">{{item.time}}</p>
					<p class="order_persontit">{{item.post}}{{item.name}}</p>
					<p>{{item.desc}}</p>
				</div>

			</div>

		</div>
	

	</div>
</template>

<script>
	export default{
		data(){
			return{
				workOrderStateName:"处理中",
				handelUserIdlist:[{
					handelUserId:"张瑟",
					label:"张瑟"
				},{
					handelUserId:"王舞",
					label:"王舞"
				},
				{
					handelUserId:"李胜利",
					label:"李胜利"
				}],
				handelUserId:"请选择指派给哪个工作人员",
				recordlist:[{
					time:"2018.11.13",
					name:"厦瑟",
					post:"业务支持",
					desc:"工单处理完成"
				},{
					time:"2018.11.12",
					name:"张厦瑟",
					post:"业务支持",
					desc:"处理工单"
				},{
					time:"2018.11.11",
					name:"张瑟",
					post:"坐席人员",
					desc:"创建工单"
				}]
			}
		}
	};
</script>

<style scoped>
.orderstate_tips{color:#fff;font-size:12px;padding:2px 5px;border-radius:3px;}
.ostate1{background:#FA637B;}
.order_stateline{color:#FA637B;}
.line_headtips{margin:0 10px 10px;border-bottom:1px solid #eee;}
.line_headtips span{display:block;width:100px;text-align:center;color:#01d39a;font-weight:bold;border-bottom:2px solid #01d39a;}
.line_listinput a{margin-left:20px;color:#01d39b;cursor:pointer;}
.line_listeditbox{line-height:40px;width:100%;}
.line_edittips{display:block;color:#FA637B;font-size:12px;margin-left:5px;}
.clred{color:#FA637B;padding-right:2px;font-style:normal;}
.order_btnbox{padding:15px 0;text-align:center;}
.order_left{float:left;width:70%;}
.order_right{float:right;min-width:170px;}
.orderrecordlist{position:relative;padding-left:30px;padding-bottom:20px;background: url("../../../static/image/flow_bg.png") no-repeat;}
.order_timetit{position:absolute;top:-5px;color:#01d39a;font-size:12px;font-weight:bold;}
.order_persontit{padding-top:20px;}
.order_recordtit{padding:10px 0;font-weight:bold;}
</style>